import React,{Component, useEffect, useState} from "react";
import { Flex, Layout } from 'antd';
import { Button } from 'antd';
import "./App.css"
import { Card, Space } from 'antd';
import axios from "axios";
import { useNavigate } from "react-router-dom";


const { Header, Footer, Sider, Content } = Layout;

const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 60,
    paddingInline: 48,
 
    backgroundColor: '#24bfe4',
  };
  const contentStyle = {
    height:'100px',
 
  
    color: '#fff',
    // backgroundColor: '#0958d9',
  };
  const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#1677ff',
  };
  const footerStyle = {
  
    color: '#fff',
    // backgroundColor: '#4096ff',
    height:'900px'
  };
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '',
  
 
  };

//   const [an,setAn]=useState('')




export default function App(){

    const [data,getData] = useState([])

    const getlist=async()=>{
        await axios.get(`http://localhost:3001/type`).then(res=>{
            if(res.status==200){
                getData(res.data)
            }
        })
    }
    
    useEffect(()=>{
        getlist()
    },[])

    const navigator=useNavigate()

    const gwc=()=>{
        navigator('/gwc')
    }
    const [aaa,setAaa]=useState(true)
    
    return(
        <div>

        <div>
        <Layout style={layoutStyle}>
            <Header style={headerStyle}>
            <Button type="primary" style={{backgroundColor:'rgb(196 252 255)',color:'black'}}>首页</Button>
            <Button type="primary" style={{backgroundColor:'rgb(196 252 255)',color:'black'}} onClick={()=>gwc()}>购物车</Button>
           
     
            
            </Header>
            <Content style={contentStyle}>Content</Content>
            <Footer style={footerStyle}>

                <div>

                    <div style={{display:'flex',justifyContent:'space-between',flexWrap:'wrap'}}>

                        {
                            data.map(item=>{
                                return(
                                    <div key={item.id} style={{width:'33%',paddingLeft:'90px',marginTop:'20px'}}>
                                        <Card  style={{textAlign:'center'}} >
                                    <p><img src="https://img2.baidu.com/it/u=3238494404,2162289475&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500" style={{width:'190px'}}></img></p>
                                    <p style={{fontWeight:'bolder',fontSize:'20px'}}>{item.name}</p>
                                    <p>${item.price}元</p>
                                    </Card>

                                    </div>
                                    
                                )
                            })
                        }
                   
                    </div>

                </div>
            </Footer>
            </Layout>
        </div>




        </div>
    )
}